<template>
    <transition name="slide">
        <music-list :title="title" :bg-image="bgImage" :songs="songs"></music-list>
    </transition>
</template>

<script>
import MusicList from '../../components/music-list/music-list'
import {getSongList} from '../../api/recommend.js'
import {ERR_OK} from '../../api/config.js'
import {mapGetters} from 'vuex'
import {createSong} from '../../common/js/song.js'

export default {
    data(){
        return {
            songs:[]
        }
    },
    created(){
        this._getSongList()
    },
    computed:{
        title(){
            return this.disc.dissname
        },
        bgImage(){
            return this.disc.imgurl
        },
        ...mapGetters([
            'disc'
        ])
    },
    methods:{
        _getSongList(){
            if(!this.disc.dissid){
                this.$router.push('/recommend')
                return
            }
            getSongList(this.disc.dissid).then((res)=>{
                if(res.code===ERR_OK){
                    this.songs=this.SongsListData(res.cdlist[0].songlist)
                }
            })
        },
        SongsListData(list){
            let ret=[]
            list.forEach((musicData) => {
                if(musicData.songid&&musicData.albumid){
                    ret.push(createSong(musicData))
                }
            });
            return ret
        }
    },
    components:{
        MusicList
    }
}
</script>

<style lang="stylus" scoped>
.slide-enter-active,.slide-leave-active
  transition :all 0.3s
.slide-enter,.slide-leave-to
  transform :translate3d(100%,0,0)
</style>
